<template>
  <div class="device-search">
    <div
      class="flex items-center justify-between mb-4 normal-search search gap-x-4"
      v-if="normal"
    >
      <a-input-search
        v-model:value="value"
        placeholder="请输入查询设备名称"
        enter-button="搜索"
        size="large"
        @search="onSearch"
      />
      <a-button @click="changeSearchType">高级搜索</a-button>
    </div>
    <div
      class="flex items-center justify-between mb-4 special-search search gap-x-4"
      v-else
    >
      <a-input-search
        v-model:value="value"
        placeholder="请输入查询设备名称"
        enter-button="搜索"
        size="large"
        @search="onSearch"
      />
      <a-radio-group v-model:value="searchStatus" class="whitespace-nowrap">
        <a-radio-button :value="Status.Normal">正常</a-radio-button>
        <a-radio-button :value="Status.Discarded">报废</a-radio-button>
        <a-radio-button :value="Status.Deleted">删除</a-radio-button>
      </a-radio-group>
      <div>
        <a-range-picker v-model:value="time" class="w-72" />
      </div>
      <a-button type="primary" @click="changeSearchType">普通搜索</a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { DeviceStatus } from "@/@types/enum";
import { defineComponent, ref } from "vue";
import { Moment } from "moment";

export default defineComponent({
  name: "DeviceSearch",
  emits: ["deviceSearch"],
  setup(__, context) {
    const value = ref<string>("");
    const time = ref<Moment[]>([]);
    const searchStatus = ref<number>(DeviceStatus.NORMAL);
    const normal = ref<boolean>(true);
    const changeSearchType = () => {
      normal.value = !normal.value;
    };
    const Status = {
      Normal: DeviceStatus.NORMAL,
      Deleted: DeviceStatus.DELETED,
      Discarded: DeviceStatus.DISCARDED,
    };
    const onSearch = () => {
      if (normal.value === true) {
        context.emit("deviceSearch", {
          name: value.value,
          status: DeviceStatus.NORMAL,
        });
      } else {
        const searchAns = {
          name: value.value,
          status: searchStatus.value,
        };
        if (time.value.length > 1) {
          Object.assign(searchAns, {
            startTime: time.value[0].valueOf(),
            endTime: time.value[1].valueOf(),
          });
        }
        context.emit("deviceSearch", searchAns);
      }
    };
    return {
      value,
      onSearch,
      normal,
      Status,
      searchStatus,
      changeSearchType,
      time,
    };
  },
});
</script>

<style scoped lang="scss"></style>
